<template>
  <div class="head">
    <img class="logoimg" src="../assets/img/m-logo.png" alt="" />
    <img class="moreimg" @click="opentc" src="../assets/img/m-more.png" alt="" />
    <van-popup
      v-model="show"
      closeable
      position="right"
      :style="{ width: '80%', height: '100%' }"
    >
      <div class="tc">
        <div class="zk">
          <div class="h4" style="color: #202536">产品</div>
          <img src="../assets/img/zkccc.png" alt="" />
        </div>
        <div class="line">
          <div class="color"></div>
        </div>
        <div class="ul">
          <li style="padding-top: 0px" @click="topay">子弹发薪</li>
          <li @click="tohelper">子弹企微助手</li>
          <li @click="tojob">子弹工作</li>
          <li style="padding-bottom: 0px" @click="toinsurance">工伤保险</li>
        </div>
        <div class="line">
          <div class="color"></div>
        </div>
        <div class="about">
          <div class="h4" @click="toabout">了解子弹</div>
        </div>
        <div class="line">
          <div class="color"></div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    opentc() {
      this.show = true;
    },
    toindex() {
      this.$router.push({ path: "/m/home" });
    },
    topay() {
      this.$router.push({ path: "/m/m-sass-pay" });
    },
    tohelper() {
      this.$router.push({ path: "/m/m-sass-helper" });
    },
    tojob() {
      this.$router.push({ path: "/m/m-sass-job" });
    },
    toinsurance() {
      this.$router.push({ path: "/m/m-sass-insurance" });
    },
    toabout() {
      this.$router.push({ path: "/m/m-sass-about" });
    },
  },
};
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 30px 21px;
}

.logoimg {
  height: 45px;
  width: auto;
}

.moreimg {
  height: 28px;
  width: auto;
}
.tc {
  margin-top: 140px;
  width: 100%;
  box-sizing: border-box;
}
.line {
  width: 100%;
  box-sizing: border-box;
  padding: 30px 40px;
  .color {
    width: 100%;
    height: 2px;
    background-color: #eaeaef;
  }
}
.zk {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  padding-left: 40px;
  padding-right: 40px;
  align-items: center;
  font-size: 30px;
  color: #202536;
  img {
    width: 36px;
    height: 36px;
  }
}
.ul {
  padding-left: 20px;
  li {
    list-style: none;
    color: #565868;
    font-size: 28px;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 32px;
  }
}
.about {
  color: #202536;
  font-size: 30px;
  padding-left: 40px;
}
</style>
